<template>
    <div>
        <el-row type="left"
                    v-for='(thruster, index) in thrusterVert'
                    :key='index'
            >
                    <el-popover
                        placement='top-start'
                        :title="(index + 1) + '号垂推'"
                        trigger='hover'
                        :content="thruster.title + ' ' + thruster.subTitle">
                        <el-button circle :type='thruster.type' :icon='thruster.icon'
                                   slot='reference'></el-button>
                    </el-popover>
            <label> {{ index + 1 }}&nbsp;号垂推</label>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'thrusterVert',
    data() {
        return {
            success: {
                type: 'success',
                title: '正在运行',
                subTitle: [],
                icon: 'el-icon-circle-check'
            },
            error: {
                type: 'danger',
                title: '断开连接',
                subTitle: [],
                icon: 'el-icon-warning'
            },
            warning: {
                type: 'warning',
                title: '正在连接',
                subTitle: [],
                icon: 'el-icon-loading'
            },
            info: {
                type: 'info',
                title: '未运行',
                subTitle: [],
                icon: 'el-icon-circle-close'
            },
            thrusterVert: [
                {
                    type: '',
                    title: '',
                    subTitle: ''
                },
                {
                    type: '',
                    title: '',
                    subTitle: ''
                },
                {
                    type: '',
                    title: '',
                    subTitle: ''
                }
            ]
        };
    },
    mounted() {
        var time = this.getTime();
        this.thrusterVert[0].type = this.warning.type;
        this.thrusterVert[0].icon = this.warning.icon;
        this.thrusterVert[0].title = this.warning.title;
        this.thrusterVert[0].subTitle = time;
        this.thrusterVert[1].type = this.warning.type;
        this.thrusterVert[1].icon = this.warning.icon;
        this.thrusterVert[1].title = this.warning.title;
        this.thrusterVert[1].subTitle = time;
        this.thrusterVert[2].type = this.warning.type;
        this.thrusterVert[2].icon = this.warning.icon;
        this.thrusterVert[2].title = this.warning.title;
        this.thrusterVert[2].subTitle = time;
        setInterval(this.addData, 3000);
    },
    methods: {
        getTime: function() {
            var ts = arguments[0] || 0;
            var t, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 定义时间格式
            return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        },
        // 添加实时数据
        addData: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/thrusterVert/').then((res) => { // 这里输入了后端的url
                var time = this.getTime();
                // console.log(res.data)
                this.thrusterVert[0].type = res.data.type[0];
                this.thrusterVert[0].icon = res.data.icon[0];
                this.thrusterVert[0].title = res.data.title[0];
                this.thrusterVert[0].subTitle = time;
                this.thrusterVert[1].type = res.data.type[1];
                this.thrusterVert[1].title = res.data.title[1];
                this.thrusterVert[1].icon = res.data.icon[1];
                this.thrusterVert[1].subTitle = time;
                this.thrusterVert[2].type = res.data.type[2];
                this.thrusterVert[2].title = res.data.title[2];
                this.thrusterVert[2].icon = res.data.icon[2];
                this.thrusterVert[2].subTitle = time;
            }).catch((error)=> {
                var time = this.getTime();
                this.thrusterVert[0].type = this.error.type;
                this.thrusterVert[0].icon = this.error.icon;
                this.thrusterVert[0].title = this.error.title;
                this.thrusterVert[0].subTitle = time;
                this.thrusterVert[1].type = this.error.type;
                this.thrusterVert[1].icon = this.error.icon;
                this.thrusterVert[1].title = this.error.title;
                this.thrusterVert[1].subTitle = time;
                this.thrusterVert[2].type = this.error.type;
                this.thrusterVert[2].icon = this.error.icon;
                this.thrusterVert[2].title = this.error.title;
                this.thrusterVert[2].subTitle = time;
            });
        }
    }
};
</script>

<style scoped>
.el-row {
    padding: 10px;
}

.el-button {
    /*width: 50px;*/
    /*height: 50px;*/
    /*margin: auto auto;*/
    /*font-size: 30px;*/
}

.label {
    margin: auto auto;
}

.buttons {
    display: flex;
    justify-content: left;
    /*align-items: center;*/
}

</style>
